<template>
  <div>
    <el-dialog
      title="查看详情"
      width="1300px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"

    >
      <div class="dialogBody">
        <ul>
          <li class="flexItem">
            <div>
              <span class="item_lable">活动类型:</span>
              {{ info.type | activityTypeTxt }}
            </div>
            <div>
              <span class="item_lable">活动发起人:</span>
              {{ info.originator }}
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">活动标题:</span>
              {{ info.name }}
            </div>
            <div>
              <span class="item_lable">联系电话:</span>
              {{ info.originator_tel }}
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">活动地点:</span>
              {{ info.address }}
            </div>
            <div>
              <span class="item_lable">活动起止时间:</span>
              {{ info.begin_time }}~{{ info.end_time }}
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">人数限制:</span>
              {{ info.person_num_limit }}
            </div>
            <div>
              <span class="item_lable">报名起止时间:</span>
              {{ info.sing_start_time }}~{{ info.sing_end_time }}
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">活动积分:</span>
              <span style="color: #1890ff; margin-right: 14px">
               {{ info.point_type == 1 ? '获得' : '消耗' }}{{ Number(info.point_num) }}积分</span
              >
              <span style="color: #ff9243">
                获得荣誉积分{{ info.honor_point_num }}</span
              >
            </div>
            <div>
              <span class="item_lable">性别限制:</span>
              {{
                info.sex_limit == 1 ? "男" : info.sex_limit == 2 ? "女" : "不限"
              }}
            </div>
          </li>
          <li class="flexItem">
            <div style="display: flex">
              <span class="item_lable">活动内容:</span>
              <div v-html="info.content"></div>
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">温馨提示:</span>
              {{ info.remarks }}
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">发起时间:</span>
              邻里活动
            </div>
          </li>
          <li class="flexItem">
            <div>
              <span class="item_lable">活动封面:</span>
              <el-image
                
                style="vertical-align: top;width: 150px; height: 150px"
                :src="info.cover"
                :preview-src-list="[info.cover]"
              >
              </el-image>
              <!-- <img
                style="vertical-align: top"
                width="160"
                height="160"
                :src="info.cover"
                alt=""
              /> -->
            </div>
            <div>
              <span class="item_lable">活动详情页:</span>
              <el-image
                
                style="vertical-align: top;width: 150px; height: 150px"
                :src="info.detail_pic"
                :preview-src-list="[info.detail_pic]"
              >
              </el-image>
              <!-- <img
                style="vertical-align: top"
                width="160"
                height="160"
                :src="info.detail_pic"
                alt=""
              /> -->
            </div>
          </li>
        </ul>
        <div class="tableList">
            <div class="tabsBox">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name" lazy></el-tab-pane>
                    <!-- <el-tab-pane label="已报名(25)" name="1"></el-tab-pane>
                    <el-tab-pane label="活动评论(5)" name="2"></el-tab-pane> -->
                </el-tabs>
            </div>
          <div class="tablesCard bgfff">
            <div class="tablesCardTop">
              <div style="display:flex" v-if="activeName == 1">
                <div class="totalTxt" style="margin-right:20px">未签到:{{signNum.unsign_num}}人</div>
                <div class="totalTxt">已签到:{{signNum.sign_num}}人</div>
              </div>

              <div v-if="activeName == 1">
                <el-button
                  type="primary"
                  size="small"
                  @click="exportList"
                  >名单导出</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="addPeopleShow = true"
                  >新增人员</el-button
                >
              </div>
            </div>
            <el-table
             v-if="activeName == 1"
              :data="tableData"
              border
              size="small"
              height="580"
              style="width: 100%"
            >
             
              </el-table-column>
              <el-table-column prop="userOne.userName" label="姓名" align="center" width="100">
               
              </el-table-column>
              <el-table-column
                prop="userOne.mobile"
                label="手机号"
                align="center"
              />
              <el-table-column
                prop="userOne.idNo"
                label="身份证号"
                align="center"
              />
              <el-table-column
                prop="userOne.age"
                label="年龄"
                align="center"
              >
             
              </el-table-column>
              <!-- <el-table-column
                prop="userOne.mobile"
                label="身份"
                align="center"
              /> -->
              <el-table-column
                prop="userOne.house.name"
                label="居住房屋"
                align="center"
                width="200"
              >
            
              </el-table-column>
              <el-table-column
                prop=""
                label="签到状态"
                align="center"
                width="110"
              >
              <template slot-scope="scope">
                {{scope.row.topart == 3 ? '已签到' : '未签到'}}
              </template>
              </el-table-column>
              <el-table-column
                prop="create_at"
                label="报名时间"
                align="center"
                width="100"
              />
              <el-table-column
                prop=""
                label="操作"
                align="center"
                width="90"
              >
                <template slot-scope="scope">
                  <div class="operateBtns">
                    <el-link type="primary" @click="onBtns(1, scope.row.uid,scope.row)"
                       :disabled="scope.row.topart == 3">签到</el-link
                    >
                    <el-link type="danger" :disabled="scope.row.topart == 3" @click="onBtns(2, scope.row.uid)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-table
             v-else
              :data="tableData"
              border
              size="small"
              height="580"
              style="width: 100%"
            >
             
              </el-table-column>
              <el-table-column prop="create_at" label="评论时间" align="center">
               
              </el-table-column>
              <el-table-column
                prop="content"
                label="评论内容"
                align="center"
                width="200"
              />
              <el-table-column
                prop="userOne.nickName"
                label="用户昵称"
                align="center"
              />
              <el-table-column
                 prop="userOne.userName"
                label="姓名"
                align="center"
              >
             
              </el-table-column>
              <el-table-column
                prop="userOne.mobile"
                label="联系方式"
                align="center"
              />
          
            
              </el-table-column>
            
              <el-table-column
                label="操作"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <div class="operateBtns">
                    <el-link type="danger" @click="onBtns(3,scope.row.uid)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageBlock">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page.sync="form.page"
                :page-size="form.limit"
                @size-change="
                  (e) => {
                    form.limit = e;
                    getList();
                  }
                "
                @current-change="
                  (e) => {
                    form.page = e;
                    getList();
                  }
                "
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <addPeople
     v-if="addPeopleShow"
      @handleClose="(val)=>{
        addPeopleShow = false
        if(val) {
          getList()
          getTabCount()
        }
      }"
      :dialogVisible="addPeopleShow"
      :id="id"
    >


    </addPeople>
  </div>
</template>

<script>
import {
  activeDetail,
  getActiveSignOrEvaluateList,
  exportUserExcel,
  delActivePerson,
  delActiveComment,
  signDns,
} from "@/api/activity.js";
import addPeople from "./addPeople.vue";
export default {
  name: "",
  filters: {
    activityTypeTxt(type) {
      let txt = "";
      switch (type) {
        case 1:
          txt = "邻里活动";
          break;
        case 2:
          txt = "达人活动";
          break;
        case 3:
          txt = "社团活动";
          break;
        case 4:
          txt = "志愿活动";
          break;
        case 5:
          txt = "党建活动";
          break;
      }
      return txt;
    },
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      info: {},
      activeName: "1",
      form: {
        type: 1,
        activeId: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      tableData: [],
      tabList: [
        {
          label: "已报名(0)",
          name: "1",
        },
        {
          label: "活动评论(0)",
          name: "2",
        },
      ],

      signNum: {
        sign_num: "",
        unsign_num: "",
      },
      addPeopleShow: false,
    };
  },

  components: { addPeople },

  computed: {},

  beforeMount() {},

  mounted() {
    this.form.activeId = this.id;
    this.getDetails();
  },

  methods: {
    getDetails() {
      activeDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          this.getList();
          this.getTabCount();
        }
      });
    },
    getTabCount() {
      getActiveSignOrEvaluateList({ ...this.form, type: 1 }).then((res) => {
        if (res.code == 200) {
          this.tabList[0].label = `已报名(${res.data.count})`;
        }
      });
      getActiveSignOrEvaluateList({ ...this.form, type: 2 }).then((res) => {
        if (res.code == 200) {
          this.tabList[1].label = `活动评论(${res.data.count})`;
        }
      });
    },
    getList() {
      getActiveSignOrEvaluateList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.signNum.sign_num = res.data.sign_num;
          this.signNum.unsign_num = res.data.unsign_num;
        }
      });
    },
    onBtns(val, id, item) {
      console.log(item, "MMMMMMMMM");
      if (val == 1) {
        //签到
        this.$confirm("是否确认签到?", "", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(() => {
            if (
              (new Date().getTime() >
                new Date(this.info.begin_time).getTime() &&
                new Date().getTime() <
                  new Date(this.info.end_time).getTime()) ||
              new Date().getTime() ==
                new Date(this.info.begin_time).getTime() ||
              new Date().getTime() == new Date(this.info.end_time).getTime()
            ) {
              signDns({
                activeId: this.id,
                userId: id,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "签到成功!",
                  });
                }
                this.getList();
              });
            } else {
              this.$message({
                type: "error",
                message: "签到失败，请看一下活动起止时间",
              });
            }
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      } else if (val == 2) {
        //删除
        this.$confirm(
          "确认将该人员从活动报名人员中删除吗？删除后该人员将无法进行签到获取此活动积分",
          "",
          {
            confirmButtonText: "是",
            cancelButtonText: "否",
            type: "warning",
          }
        )
          .then(() => {
            delActivePerson({
              activeId: this.id,
              userId: id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
                this.getTabCount();
              }
            });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      } else if (val == 3) {
        //删除评论
        this.$confirm("确认删除该条评论吗？", "", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(() => {
            delActiveComment({
              activeId: this.id,
              userId: id,
            }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消下架",
            // });
          });
      }
    },

    handleClick() {
      this.form.type = this.activeName;
      this.getList();
    },
    exportList() {
      exportUserExcel({ activeId: this.id }).then((res) => {
        if (res.code == 200) {
          // const a = document.createElement("a");
          // a.href = this.$resDomain + res.data.path;
          // a.download = "活动人员清单.xlsx";
          // a.click();
          window.open(this.$resDomain + res.data.path);
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.dialogBody {
  .flexItem {
    display: flex;
    > div {
      margin-bottom: 10px;
      flex: 1;
      color: #000;
      .item_lable {
        display: inline-block;
        width: 100px;
        color: #606266;
      }
    }
  }
  .tableList {
    padding-top: 10px;
    border: 1px solid #e5e5e5;
    .el-tabs {
      height: 20px;
    }
    .tabsBox {
      margin: 0 24px;
    }
  }
}
</style>